import { Carousel } from 'antd'
import { FC, useEffect, useRef } from 'react'

import WordHScroll from '../WordHScroll'

// import WordHScroll from "../../../../Components/WordHScroll"

export type CarouselBoxProps = {
  data: any[]
  dataIndex: number
  color: any[]
}

const CarouselBox: FC<CarouselBoxProps> = ({ data, dataIndex, color }) => {
  const carouselRef = useRef<any>(null)
  useEffect(() => {
    carouselRef.current.goTo(dataIndex)
  }, [dataIndex])
  return (
    <div className="CarouselBox">
      <Carousel
        ref={carouselRef}
        effect="fade"
        speed={1800}
        dots={false}
        adaptiveHeight={true}
      >
        {data?.map((item, i) => {
          return (
            <div className="CarouselBox-item" key={i}>
              <div
                className="item-n"
                style={{
                  padding: '0 16px',
                  width: 110,
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center'
                }}
              >
                <div
                  style={{
                    overflow: 'hidden',
                    whiteSpace: 'nowrap',
                    width: 110
                  }}
                >
                  {/* NOTE: 注意
                  这个 WordHScroll组件的引入路径，因为如果之前外面Components下的 WordHScroll，轮播滚动时，文本滚动不会生效
                  暂时还不清楚什么原因导致的，先这么处理
                  */}
                  <WordHScroll>
                    <span>{item.name}</span>
                  </WordHScroll>
                </div>
              </div>
            </div>
          )
        })}
      </Carousel>
    </div>
  )
}

export default CarouselBox
